<template>
  <div>
      <!-- 商品控制台  可视化 -->
      <!-- 筛选条件 -->
      <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="6">
              <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="fetchData"
              />
          </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20" style="margin-top: 40px;">
          <!-- 销售趋势图 -->
          <el-col :span="12">
              <el-card>
                  <div ref="trendChart" style="width: 100%; height: 400px;"></div>
              </el-card>
          </el-col>

          <!-- 产品销量饼图 -->
          <el-col :span="12">
              <el-card>
                  <div ref="pieChart" style="width: 100%; height: 400px;"></div>
              </el-card>
          </el-col>
      </el-row>

      <!-- 加载提示 -->
      <div v-if="isLoading" class="loading-mask">
          <i class="el-icon-loading"></i>
          <span>正在加载数据...</span>
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  data() {
      return {
          dateRange: [], // 日期范围
          selectedProduct: '', // 选择的产品
          products: ['珍珠奶茶', '红豆奶茶', '抹茶奶茶', '椰果奶茶'], // 产品列表
          trendChart: null, // 销售趋势图实例
          pieChart: null, // 产品销量饼图实例
          trendData: [], // 销售趋势数据
          pieData: [], // 产品销量数据
          isLoading: false // 加载状态
      };
  },
  mounted() {
      // 初始化图表
      this.trendChart = echarts.init(this.$refs.trendChart);
      this.pieChart = echarts.init(this.$refs.pieChart);

      // 获取数据
      this.fetchData();
  },
  methods: {
      // 获取数据
      fetchData() {
console.log(this.dateRange);

    this.isLoading = true;
    this.axios({
        url: 'GoodsVisu',
        method: 'get',
        params:{
            starttime:this.dateRange[0]||null,
            endtime:this.dateRange[1]||null
        }
    }).then(response => {
        if (response.data && response.data.data) {
            this.trendData = response.data.data.trendData;
            this.pieData = response.data.data.pieData;
            this.renderTrendChart();
            this.renderPieChart();
        }
    }).catch(error => {
        console.error('数据获取失败:', error);
        this.$message.error('数据获取失败，请稍后重试');
    }).finally(() => {
        this.isLoading = false;
    });
      },
      // 渲染销售趋势图
      renderTrendChart() {
          const option = {
              title: {
                  text: '销售趋势',
                  left: 'center',
                  textStyle: {
                      color: '#333'
                  }
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              xAxis: {
                  type: 'category',
                  data: this.trendData.map(item => item.date),
                  axisLabel: {
                      rotate: 45
                  }
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      formatter: '{value} 元'
                  }
              },
              series: [
                  {
                      data: this.trendData.map(item => item.sales),
                      type: 'line',
                      smooth: true,
                      itemStyle: {
                          color: '#f60'
                      },
                      lineStyle: {
                          color: '#f60'
                      }
                  }
              ]
          };
          this.trendChart.setOption(option);
      },
      // 渲染产品销量饼图
      renderPieChart() {
          const option = {
              title: {
                  text: '产品销量占比',
                  left: 'center',
                  textStyle: {
                      color: '#333'
                  }
              },
              tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b}: {c} 元 ({d}%)'
              },
              series: [
                  {
                      name: '销量',
                      type: 'pie',
                      radius: ['30%', '70%'],
                      data: this.pieData,
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      },
                      label: {
                          formatter: '{b}: {d}%'
                      }
                  }
              ]
          };
          this.pieChart.setOption(option);
      },
      // 重置筛选条件
      resetFilters() {
          this.dateRange = [];
          this.selectedProduct = '';
          this.fetchData();
      }
  },
  beforeDestroy() {
      // 销毁图表实例，防止内存泄漏
      if (this.trendChart) {
          this.trendChart.dispose();
      }
      if (this.pieChart) {
          this.pieChart.dispose();
      }
  }
};
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
}

.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255  );
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-mask i {
  font-size: 24px;
  margin-right: 10px;
}
</style>